import React from 'react'
import {FormGroup, Input} from "reactstrap";
import {SET_EVENT_FILTER_CHECKED} from "../../../redux/constants/events";
import {Search} from "react-feather";

class EventSearch extends React.PureComponent {
  searchText = ''

  resetSearch = () => {
    this.searchFormRef.reset()
  }

  searchHandleChange = e => {
    this.searchText = e.target.value
    setTimeout(() => {this.props.setFieldData(SET_EVENT_FILTER_CHECKED, "search", this.searchText)}, 200)
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if(!this.props.userFilterData.search) this.resetSearch()
  }

  render() {
    return (
      <div className="ecommerce-searchbar events__search">
        <FormGroup className="position-relative">
          <form ref={elem => this.searchFormRef = elem}>
            <Input
              className="search-product"
              placeholder="Попробуй поискать здесь"
              onChange={this.searchHandleChange}
            />
          </form>
          <div className="form-control-position">
            <Search size={22} />
          </div>
        </FormGroup>
      </div>
    )
  }
}

export default EventSearch
